<template>
  <uni-nav-bar title="活动" color="#333" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
  <view class="active" v-for="(item, index) in activityList" :key="index" @click="submit(item.id)">
    <view class="left_active">
      <text>{{ item.name }}</text>
    </view>
    <uni-icons type="right" color="#999" size="28"></uni-icons>
  </view>
</template>

<script setup lang="ts">
import { active } from '@/gql/welfare';
import { navBack, navTo } from '@/utils/navigator';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { ref } from 'vue';

// static
const activityList = ref([]); //活动列表
// data
let activeWelf = ''; //业务

onLoad(({ active }) => {
  activeWelf = active ? active : '';
});

onShow(getList);
/**
 * 获取活动列表
 */
function getList() {
  const payload = {
    query: active,
  };
  toPublish('ql/welfare/activityList', payload, (obj: any) => {
    const { activity_list } = obj.data;
    activityList.value = activity_list;
  });
}

/**
 * @param {Object} id 活动ID
 */
function submit(id) {
  navTo(`welfare/welfare?id=${id}&activeWelf=${activeWelf}`);
}
</script>

<style lang="less">
.active {
  width: 95%;
  margin: 2.5%;
  height: 124rpx;
  background: #ffffff;
  border-radius: 5px;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left_active {
    width: 90%;
    text {
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    text:nth-of-type(1) {
      font-size: 30rpx;
    }
    text:nth-of-type(2) {
      font-size: 22rpx;
    }
  }
}
</style>
